<template>
  <div class="content" >
    <nut-navbar class="navbar" z-index="5" :clickable="false" fixed safe-area-inset-top>
      <template #content>
        <span>{{ clubInfo.club_name }}</span>
      </template>
      <template #left>
        <img src="/imgs/club/arrow_left.png" alt="" @click="router.go(-1)" class="arrow_left" />
      </template>
      <template #right>
        <ImgT class="save" src="/imgs/club/share.png" @click="goToPage" />
      </template>
    </nut-navbar>
    
    <div class="list_con" :style="contentStyle()">
      <div class="club_card">
        <!-- 俱乐部信息 -->
        <div class="club_info">
          <img :src="clubInfo.club_logo == 'club_logo' ? `/imgs/club/club_logo.png` : joinURL(settings.media_url, clubInfo.club_logo)" class="club_icon" alt="club_icon" />
          <div class="club_details">
            <div class="club_name">{{ clubInfo.club_name }}</div>
            <div class="club_id">ID {{ clubInfo.club_id }}</div>
            <div class="club_desc">{{ clubInfo.club_introduction }}</div>
          </div> 
          <ImgT class="club_btn" src="/imgs/club/set_up.png" v-if="clubInfo.is_admin === 1 || clubInfo.is_creator === 1"  @click="goToCreate" />
        </div>
        <!-- 成员信息 -->
        <div class="member_info">
          <div class="member_title">
            <span>{{ t('club_page_cheny') }} {{ clubInfo.totalmember }}人</span>
            <span class="member_manage" v-if="clubInfo.is_admin === 1 || clubInfo.is_creator === 1" @click="goToMember">
              {{ t('club_page_cygl') }}<span v-if="clubOtherInfo.approve_count > 0" class="unread_badge">{{ clubOtherInfo.approve_count }}</span>
            </span>
          </div>
            <div class="member_list">
            <div class="member_avatar_box">
              <img
                v-for="(member, index) in memberList"
                :key="index"
                :src="typeof member.head_photo === 'number' || !isNaN(Number(member.head_photo))
                  ? `/imgs/head_icons/${member.head_photo}.webp`
                  : joinURL(settings.media_url, member.head_photo)"
                alt=""
                class="member_avatar"
              />
            </div>
            <iconpark-icon class="more_members"  @click="goToMember" name="more-fcgljkk0" size="38"></iconpark-icon>
          </div>
        </div>
      </div>
      <!-- 最新赛事 -->
      <div class="new_events_box">
        <HomeEvent :type="false"/>
      </div>
      <!-- 全部分类 -->
      <div class="card_lis_all">
        <!-- <nut-infinite-loading v-model="infinityValue" load-more-txt=" "
          :has-more="hasMore" @load-more="onLoad"> -->
          <nut-empty v-if="gameList.length < 0" :description="t('nomore_data')"></nut-empty>
          <GameCard v-else :gameList="gameList" :isAdmin="clubInfo.is_admin" :isCreator="clubInfo.is_creator" :clubId="clubId" />
        <!-- </nut-infinite-loading> -->
      </div>
    </div>
    
    <!-- 申请 -->
    <Modal v-model:visible="isShowWin" :title="t(club_title)" @close="">
      <div class="popup_body">
        <div class="info">{{ t('club_page_qrsqadmin') }}</div>
        <div class="submit_btn">
          <span class="submit_close" @click="close">{{ t('cancel') }}</span>
          <Btn height="44px" width="147px" class="submit" @click="submitAc">{{ t('confirm') }}</Btn>
        </div>
      </div>
    </Modal>
    
    <!-- 分享弹窗 -->
    <ShareModal v-model:visible="isShowApply" :id="clubId" :type="1" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from "vue";
import { useI18n } from "vue-i18n";
import { storeToRefs } from "pinia";
import { User } from "@/store/user";
import { Page } from '@/store/page';
import pinia from "@/store/index";
const { settings} = storeToRefs(Page(pinia));
import { useRouter, useRoute } from "vue-router";
import { joinURL } from '@/utils/publicMethods'

import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from "@/netBase/NetPacket";

import HomeEvent from "@/components/homeEvent.vue";
import GameCard  from '../components/gameCard.vue';
// import InvitationPopup from "../components/invitationPopup.vue";
import ShareModal from "../components/shareModal.vue";
const { appHeight } = storeToRefs(User(pinia));
const route = useRoute();
const router = useRouter();
const { t } = useI18n();

const isShowWin = ref(false);
const club_title = ref('');
const clubId = ref()

const clubInfo: any = ref({});
const clubOtherInfo: any = ref({})

// const infinityValue = ref(false);
// const hasMore = ref(true);

// 成员列表
const memberList: any = ref([]);
// 游戏列表
const gameList: any = ref([]);

const contentStyle = () => {
  return window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone ? { height: `calc(${appHeight.value}px - 100px)` } : { height: `calc(${appHeight.value}px - 100px)` }
};

// 获取俱乐部信息
const getClubInfo = () => {
  const req = NetPacket.req_get_club_info();
  req.club_id = clubId.value
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_get_club_info",
    callback: getClubInfoHandle,
  });
};
// 俱乐部信息返回
const getClubInfoHandle = (res: any) => {
  clubInfo.value = res
  memberList.value = res.userinfo
  gameList.value = res.gamelist
};
// 

// 获取俱乐部其它信息
const getClubOtherInfo = () => {
  const req = NetPacket.req_get_extra_club_info();
  req.club_id = clubId.value
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_get_extra_club_info",
    callback: getClubOtherInfoHandle,
  });
};
// 俱乐部信息其它返回
const getClubOtherInfoHandle = (res: any) => {
  clubOtherInfo.value = res
};

const goToCreate = () => {
  router.push({
    path: "/club/create",
    query: {
      club_id: clubId.value,
    },
  });
}

const goToMember = () => {
  const path = (clubInfo.value.is_admin == 1 || clubInfo.value.is_creator == 1)
    ? "/club/member" 
    : "/club/member/allMember";
  router.push({
    path,
    query: {
      club_id: clubId.value,
    },
  });
};

const isShowApply = ref(false);
const goToPage = () => {
  isShowApply.value = true
  club_title.value = t('tip')
}

// const onModalClose = () => {
//   isShowApply.value = false;
// };

const close = () => {
  isShowWin.value = false
}

const submitAc = () => {
  isShowWin.value = false
}

// const onLoad = () => {
//   if (hasMore.value) {
//     params.page++;
//     getClubMember();
//   } else {
//     console.log('没有更多数据了');
//   }
// };


watch(
  () => route.query.club_id,
  (newId) => {
    console.log('newId', newId)
    clubId.value = Number(newId)
  },
  { immediate: true }
);

onMounted(async () => {
  const { club_id } = route.query;
  clubId.value = Number(club_id)
  await getClubInfo()
  await getClubOtherInfo()
});

onUnmounted(() => {
  
});
</script>

<style scoped lang="scss">
.content {
  font-size: 14px;
  margin: 0 0 10px;
 

  .arrow_left {
    width: 24px;
    height: 24px;
  }
  :deep(.nut-navbar__right) {
    padding: 0;
  }
  .save {
    width: 32px;
    height: 32px;
  }
  .list_con {
    overflow: auto;

    .club_card {
      width: 347px;
      margin: 20px auto 0;
      border-radius: 10px;
      color: #fff;
      font-family: Arial, sans-serif;

      .club_info {
        width: 347px;
        // height: 118px;
        display: flex;
        align-items: center;
        padding: 10px 10px;
        margin-bottom: 14px;
        border-radius: 8px;
        background: #131232;
        box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
        position: relative;

        .club_icon {
          width: 82px;
          height: 82px;
          border-radius: 50%;
          margin-right: 6px;
          object-fit: cover;
        }

        .club_details {
          flex: 1;

          .club_name {
            width: 242px;
            word-break: break-word;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 8px;
            color: #FFFFFF;
          }

          .club_id {
            font-size: 14px;
            color: #FFFFFF;
            margin-bottom: 8px;
          }

          .club_desc {
            width: 242px;
            word-break: break-word;
            color: #C0C2DB;
            font-family: "PingFang SC";
            font-size: 10px;
            font-style: normal;
            font-weight: 400;
            line-height: 150%; /* 15px */
          }
        }

        .club_btn {
          position: absolute;
          right: 10px;
          top: 10px;
          width: 24px;
          height: 24px;
        }
      }

      .member_info {
        width: 347px;
        height: 90px;
        padding: 12px 16px;
        border-radius: 8px;
        background: #131232;
        box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;

        .member_title {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;
          font-size: 14px;
          color: #FFFFFF;

          .member_manage {
            color: #5BD9FF;
            position: relative;
          }

          .unread_badge {
            width: 18px;
            height: 18px;
            display: block;
            text-align: center;
            line-height: 18px;
            background: #ff5050;
            color: #fff;
            border-radius: 50%;
            font-size: 10px;
            position: absolute;
            top: -4px;
            right: -12px;
          }
        }

        .member_list {
          display: flex;
          align-items: center;

          .member_avatar_box {
            width: 288px;
            height: 38px;
            overflow: hidden;
            flex: 1;

            .member_avatar {
              width: 38px;
              height: 38px;
              border-radius: 50%;
              margin-right: 4px;
            }
          }

          

          .more_members {
            width: 38px;
            height: 38px;
            line-height: 38px;
            text-align: center;
            font-size: 20px;
            color: #fff;
            margin-left: 8px;
            border-radius: 50%;
          }
        }
      }
    }
  }
  
  .new_events_box {
    margin-top: 20px;
  }
}
.popup_body {
  color: #fff;
  padding: 10px;

  .info {
    margin-bottom: 10px;
    text-align: center;
    color: #FFFFFF;
    margin: 24px 0;
  }

  .submit_btn {
    margin: 20px 0;
    display: flex;
    justify-content: space-evenly;

    .submit_close {
      width: 147px;
      height: 42px;
      color: #FFFFFF;
      text-align: center;
      line-height: 44px;
      background: #282747;
      box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
      border-radius: 8px;
    }
  }
}
</style>
